<script setup lang="ts">
import carousel from './components/carousel.vue';
import search from './components/search.vue';
import level from './components/level.vue';
import region from './components/region.vue';
import card from './components/card.vue';
import tip from './components/tip.vue';
import { ref, onMounted } from 'vue';
import { reqHospital } from '@/apis/home/index';
import type { Content, HospitalResponseData } from '@/apis/home/type';
onMounted(() => {
  getHospitalInfo()
})

const pageNo = ref<number>(1)
const pageSize = ref<number>(10)
const hospitalArr = ref<Content>([])
const total = ref<number>(0)
const hostype = ref<string>('')
const districtCode = ref<string>('')


// 获取医院信息
const getHospitalInfo = async () => {
  const res:HospitalResponseData = await reqHospital(pageNo.value, pageSize.value, hostype.value, districtCode.value)
  hospitalArr.value = res.data.content
  total.value = res.data.totalElements
}

// 换页
const currentChange = () => {
  getHospitalInfo()
}

// 单页数据数量变化
const sizeChange = () => {
  getHospitalInfo()
}

const getLevel = (level:string) => {
  hostype.value = level
  getHospitalInfo()
}

const getRegion = (region:string) => {
  districtCode.value = region
  getHospitalInfo()
}
</script>



<template>
  <div class="block text-center">
    <carousel/>
    <search/>
    <el-row gutter="20">
      <el-col :span="20">
        <level @getLevel="getLevel"/>
        <region @getRegion="getRegion"/>
        <div class="hospital" v-if="hospitalArr.length > 0">
          <card class="item" v-for="(item, index) in hospitalArr" :key="index" :hospitalInfo="item"/>
        </div>
        <el-empty description="没有医院信息" v-else />
        <div class="demo-pagination-block">
          <el-pagination
            v-model:current-page="pageNo"
            v-model:page-size="pageSize"
            :page-sizes="[6, 8, 10, 12]"
            :disabled="false"
            :background="true"
            layout="prev, pager, next, jumper, ->, total, sizes"
            :total=total
            @current-change="currentChange"
            @size-change="sizeChange"
          />
        </div>
      </el-col>
      <el-col :span="4">
        <tip />
      </el-col>
    </el-row>
  </div>
</template>



<style scoped lang="scss">
.hospital{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .item{
    width: 49%;
    margin: 10px 0px;
  }
}
.demo-pagination-block{
  margin-bottom: 10px;
}
</style>